<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>轮播图-延迟加载</title>
        <!-- 轮播图--页面行为 JavaScript   功能效果一致
                    框架 Jquery           功能效果一致【简化开发】
                    terseBannerJs建立在Jquery基础之上，快速制作轮播图
         -->
         <link rel="stylesheet" href="css/style.css" />
    </head>
    <body>
        <!-- 轮播图 id和class命名问题，提醒：重名 -->
        <!-- 1.轮播图主空间区域 -->
        <div class="main">
            <!-- 2.id="animation"针对轮播添加功能效果 -->
            <div id="animation"></div>
            <!-- 3.class="container"轮播图空间范围 -->
            <div class="container">
                <!-- 4.class="container针对轮播图效果功能
                 lazyload轮播图功能为：延迟加载-->
                <div class="banner" id="lazyload">
                    <!-- 5.放图片 -->
                    <ul>
                        <li><img src="img/banner01.jpg" alt="1" /></li>
                        <li><img src="img/banner02.jpg" alt="2" /></li>
                        <li><img src="img/banner03.jpg" alt="3" /></li>
                        <li><img src="img/banner04.jpg" alt="4" /></li>
                        <li><img src="img/banner05.jpg" alt="5" /></li>
                    </ul>
                </div>
            </div>
        <script src="js/highlight.pack.js"></script>
        <script src="js/jquery-1.11.1.js"></script>
        <script src="js/jquery.terseBanner.min.js"></script>
        <script src="js/script.js"></script>
        </div>
    </body>
</html>